<template>
	<view class="total">
		<!--订单状态 -->
		<view class="topTabbar">
			<u-scroll-list indicatorWidth="670rpx" indicatorBarWidth="220rpx" :indicator="false">
				<view v-for="(item, index) in orderStatusList" :key="index"
					:style="index == orderStatusList.length - 1 ? 'padding-right: 36rpx' : ''">
					<view :class="chooseStatus === item.value ? 'Wtext Bson' : 'Wtext'" @click="handleChange(item)">
						{{ item.label }}
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="oder-info" v-if="orderList.length > 0">
			<view class="order-item" v-for="(item, index) in orderList" :key="item.id">
				<view @click="gotoOrderDetail(item)">
					<!-- 订单号 和支付状态-->
					<view class="order-status">
						<view class="oderNumber">{{ item.service_name }}</view>
						<view class="orderStatus" v-show="item.status == 1">待支付</view>
						<view class="orderStatus" v-show="item.status == 2">待接单</view>
						<view class="orderStatus" v-show="item.status == 6">待服务</view>
						<view class="orderStatus" v-show="item.status == 7">服务中</view>
						<view class="orderStatus" v-show="item.status == 3">已完成</view>
						<view class="orderStatus" v-show="item.status == 5">已取消</view>
						<view class="orderStatus" v-show="item.status == 4">已退款</view>
						<view class="orderStatus" v-show="item.status == 9||item.status == 10">已结束</view>
					</view>
					<!-- 订单信息 -->
					<view class="order-project">
						<text class="order_project_item">{{ '就诊人：' + item.patient_name }}</text>
						<view class="order_project_item">{{ '医院：' + item.hospital_name }}</view>
						<text class="order_project_item">{{ '科室：' + item.department_name }}</text>
					</view>
				</view>
				<!-- 底部时间及状态 -->
				<!-- 取消支付和继续支付 -->
				<view class="footer" v-if="item.status == 1">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom">
						<view @click="cancelOrder(item)">取消订单</view>
						<view @click="goPay(item)">立即购买</view>
					</view>
				</view>
				<!-- 进行中 -->
				<view class="footer" v-if="item.status == 2">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom-jinxing">
						<view @click="tuikuanClick(item)">申请退款</view>
					</view>
				</view>


				<view class="footer" v-if="item.status == 6">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom-jinxing">
						<view>待服务</view>
					</view>
				</view>
				<view class="footer" v-if="item.status == 7">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom-jinxing">
						<view>服务中</view>
					</view>
				</view>
				<!-- 已完成 -->
				<!-- <view class="footer" v-if="item.status == 3">
					<view class="price">{{'￥'+item.order_common_price}}</view>
					<view class="buttom-yiwancheng">
						<view>已完成</view>
					</view>
				</view> -->
				<!-- 已取消 -->
				<view class="footer" v-if="item.status == 5">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom-yiquxiao">
						<view>已取消</view>
					</view>
				</view>
				<!-- 已完成 -->
				<view class="footer" v-if="item.status == 8">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom">
						<view @click="pingjia(item)">待评价</view>
						<!-- <view v-if="item.fp==0" @click="fapiao(item)">申请发票</view>
						<view v-if="item.fp==1" >已申请发票</view> -->
					</view>
				</view>
				<!-- 申请发票 -->
				<view class="footer" v-if="item.status > 8">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
					<view class="buttom">
						<!-- <view @click="fapiao(item)">申请发票</view> -->
						<view v-if="item.fp==0" @click="fapiao(item)">申请发票</view>
						<view v-if="item.fp==1">已申请发票</view>
					</view>
				</view>
				<!-- 退款 -->
				<view class="footer" v-if="item.status == 4">
					<view class="price">{{ '￥' + item.order_common_price }}</view>
				</view>
			</view>
		</view>
		<view class="nothing" v-else>
			<!-- <image src="/static/emy.png" class="Orderchart" mode=""></image> -->
			<view class="Tzext">暂时还没有订单~</view>
		</view>




		<!-- 退出登录弹出层 -->
		<u-popup :show="showGetconts" mode="center" round="40rpx">
			<view class="popupGetconts">
				<text class="popupGetconts_comment">确定要退款吗</text>
				<view class="popupGetconts_btn">
					<text @click="showGetconts=false">取消</text>
					<text @click="tuikuanApi()">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showGetconts: false,
				//订单列表
				orderList: [],
				pages: 1,
				status: 'loadmore',
				chooseStatus: 0,
				orderStatusList: [{
						label: '全部',
						value: 0
					},
					{
						label: '待支付',
						value: 1
					},
					{
						label: '待接单',
						value: 2
					},
					{
						label: '服务中',
						value: 7
					},
					{
						label: '已完成',
						value: 3
					},
					{
						label: '已取消',
						value: 5
					},
					{
						label: '已退款',
						value: 4
					}
				]
			};
		},
		onLoad() {
			this.isLogin();
		},
		onShow() {
			this.orderList = [];
			this.pages = 1;
			this.getOrderList();
		},
		onReachBottom() {
			this.status = 'loading';
			this.pages = ++this.pages;
			this.getOrderList();
		},
		methods: {
			// 退款
			tuikuanClick(item){
				this.tuikuanClick=item
				this.showGetconts=true
			},
			tuikuanApi(item) {
				this.get('/api/qunvxckt/tuikuan', {
					id: this.tuikuanClick.id,
					userid: this.tuikuanClick.user_id
				}).then(res => {
					console.log(res,"/////")
					return
					if(res.code==1)	{
						this.getOrderList()
						this.showGetconts=false
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			//获取订单列表
			getOrderList() {
				this.post('/api/Qunvxckt/huoqugerendigndan', {
					user_id: uni.getStorageSync('user_id'),
					status: this.chooseStatus,
					page: this.pages
				}).then(res => {
					this.orderList = this.orderList.concat(res.data);
					// this.status = 'nomore'
				});
			},
			//点击订单状态
			handleChange(item) {
				this.chooseStatus = item.value;
				this.orderList = [];
				this.pages = 1;
				this.getOrderList();
			},
			// 订单支付
			goPay(item) {
				let self = this;
				self.post('/api/Qunvxckt/dingdanzhifu', {
					user_id: uni.getStorageSync('user_id'),
					order_code: item.order_code
				}).then(res => {
					// 调用只支付
					uni.requestPayment({
						privider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function(payRes) {
							uni.removeStorageSync('./fillin');
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							});
							self.pages = 1;
							self.orderList = [];
							// 支付和成功重新调用订单列表
							self.getOrderList();
						},
						fail: function(err) {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							});
							self.pages = 1;
							self.orderList = [];
							// 支付失败重新调用订单列表
							self.getOrderList();
						}
					});
					self.getOrderList();
				});
			},
			// 取消订单
			cancelOrder(item) {
				let self = this;
				uni.showModal({
					title: '确定要取消订单吗',
					success(res) {
						if (res.confirm) {
							self.post('/api/Qunvxckt/quxiaodingdan', {
								user_id: uni.getStorageSync('user_id'),
								order_code: item.order_code
							}).then(data => {
								self.orderList = [];
								self.getOrderList();
								uni.showToast({
									title: '取消成功',
									duration: 1500,
									icon: 'none'
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tuikuan() {
				uni.showModal({
					title: '申请退款需要联系客服',
					content: '4006573008',
					confirmText: '联系客服',
					success(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4006573008'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 查看订单详情
			gotoOrderDetail(item) {
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: `./Order_detail?item=${data}`
				});
			},
			pingjia(item) {
				console.log(item, "？？？？？？？？？？？？？？？？？？？？？？？")
				uni.navigateTo({
					url: `./pingjia?order_code=${item.order_code}&&user_id=${item.user_id}`
				});
			},
			fapiao(item) {
				uni.navigateTo({
					url: `./fapiao`
				});
				uni.setStorageSync('fapiaoitem', item)
			}
		}
	};
</script>

<style lang="scss">
	// 弹窗
	.popupGetconts {
		width: 614rpx;
		padding: 80rpx 60rpx 80rpx 60rpx;
		box-sizing: border-box;

		.popupGetconts_comment {
			display: block;
			font-size: 32rpx;
			color: #787B86;
			text-align: center;
			margin-bottom: 60rpx;
		}

		.popupGetconts_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			text:nth-of-type(1) {
				display: inline-block;
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #D1D1D6;
				margin-right: 14rpx;
				font-size: 30rpx;
				color: #787B86;
				text-align: center;
			}

			text:nth-of-type(2) {
				display: inline-block;
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FF4E4D;
				margin-right: 14rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}

	page {
		background-color: #ffffff !important;
	}

	.nothing {
		text-align: center;
	}

	.oder-info {
		margin-top: 110rpx;
		padding-top: 10rpx;
	}

	.topTabbar {
		position: fixed;
		top: 0rpx;
		width: 100%;
		background-color: #f7f7f7;
		padding: 7rpx 0;
		box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
	}

	.order-item {
		width: 670rpx;
		height: 340rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);

		.order-status {
			display: flex;
			justify-content: space-between;
			height: 70rpx;
			align-items: center;
			margin: 0 40rpx;
			// border-bottom: 1rpx solid #E4E4E4;

			.oderNumber {
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;
			}

			.orderStatus {
				color: red;
				font-size: 28rpx;
			}
		}

		.order-project {
			margin: 0 40rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			color: #666666;
			border-bottom: 1rpx solid #f4f4f4;

			.order_project_item {
				width: 100%;
				height: 36rpx;
				margin: 10rpx 0;
				line-height: 36rpx;
			}
		}

		.footer {
			display: flex;
			flex-direction: row;
			height: 100rpx;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 32rpx;
				color: #fb4b6c;
				font-weight: bold;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}

			.buttom {
				display: flex;
				justify-content: flex-end;
				width: 400rpx;
				margin-right: 40rpx;

				view {
					width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					border: solid 1rpx #58d3ae;
					font-size: 28rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #000;
				}

				view:nth-child(2) {
					margin-left: 20rpx;
					background-color: #58d3ae;
					color: #ffffff;
				}
			}

			.buttom-jinxing {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #ffffff;
				margin-left: 100rpx;
				background-color: #58d3ae;
				margin-left: 180rpx;
			}

			.buttom-yiwancheng {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #58d3ae;
				margin-left: 180rpx;
			}

			.buttom-yiquxiao {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #58d3ae;
				margin-left: 180rpx;
			}
		}
	}

	.Orderchart {
		display: inline-block;
		width: 250rpx;
		height: 250rpx;
		margin: 30rpx;
		margin-top: 350rpx;
	}

	.Bson {
		font-weight: 900;
	}

	.Bson::after {
		content: '';
		display: block;
		margin-left: 25rpx;
		width: 50rpx;
		margin-top: 10rpx;
		height: 5rpx;
		background-color: #58d3ae;
	}

	/* 标题样式 */
	.Wtext {
		display: inline-block;
		margin-left: 36rpx;
		width: 100rpx;
		text-align: center;
	}

	/* 顶部标题 */
	.Toptitle {
		text-align: center;
		color: #5f5af7;
		font-size: 35rpx;
		font-weight: 900;
		margin-bottom: 35rpx;
		margin-top: 60rpx;
	}

	.total {
		margin-top: -4rpx;
		padding-top: 4rpx;
		background-color: #f5f5f5;
		overflow: hidden;
	}
</style>